<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-title{
    width: 400px;
    height: 30px;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    font-size: 20px;
    left: 20px;
    color: #f5f7f9;
    line-height: 30px;
}
.ivu-layout-sider{
    background: #fff;
}
.ivu-layout-header{
    background: #ffffff;
    padding-right: 0px;
    padding-left:0px;
}
.ivu-layout-header .ivu-menu-dark{
    background: #0e90d2;
}
.layout-nav{
    margin: 0 auto;
    margin-right: 20px;
}
.layout-footer-center{
    text-align: center;
}
</style>
<template>
    <div class="layout">
        <Layout style="height:100%;">
            <Header style="height:60px;">
                <Menu mode="horizontal" :active-name="activemenuitem" theme="primary" @setmenuitem="setMenuitem" style="{background:'#0e90d2'}"  @on-select = "handletopbar">
                    <MenuItem name="tradingsystem_1">
                        <Icon type="flash"></Icon>
                        交易系统
                    </MenuItem>
                    <!--<MenuItem name="decision_1">
                        <Icon type="ios-people"></Icon>
                        提币系统
                    </MenuItem>-->
                    <MenuItem name="APIsetting">
                        <Icon type="android-settings"></Icon>
                        API配置
                    </MenuItem>
                    <MenuItem name="riskmanagement">
                        <Icon type="android-settings"></Icon>
                        风控设置
                    </MenuItem>
                    <Submenu name="5" style="float:right;">
                        <template slot="title">
                            <Icon type="person"></Icon>
                            管理员
                        </template>
                        <MenuItem name="checkupdate">检查更新</MenuItem>
                        <MenuItem name="login">退出</MenuItem>
                    </Submenu>
					
					<MenuItem name="version" style="float:right;">
                        版本号：{{version}}
                    </MenuItem>
                </Menu>
            </Header>
            <Layout style="overflow:auto;">
                <Content :style="{padding: '0', minHeight: '280px', background: '#f7f7f7'}">
                    <Layout>
                        <Content :style="{padding: '10px', minHeight: '280px', background: '#f7f7f7'}">
							<transition name="slide-right" mode="out-in">
								<router-view></router-view>
							</transition>
                        </Content>
                    </Layout>
                </Content>
            </Layout>
        </Layout>
		<Modal
			v-model="updatemodal"
			title="检查更新"
			@on-ok="ok"
			:ok-text="btntext"
			>
			<p>暂无更新</p>
		</Modal>
    </div>
	
	
</template>
<script>
	import { ipcRenderer } from "electron";
    export default {
        data(){
            return {
				btntext:'关闭',
				updatemodal:false,
                activemenuitem:'tradingsystem',
                isFullScreen:true,
                userinfo:{
                    Uname:'222'
                },
				version:'1.0.0'
            }
        },
        created(){
			ipcRenderer.on("telversion", (event, message) => {
			  this.version = message;
			});
			
			this.getMessage('telversion','telversion')
        },
        methods:{
			getMessage: function(event, type) {
			  ipcRenderer.send(event, type);
			},
            handleselect:function(name){
                this.$router.push({name:name})
            },
            handletopbar:function(name){
                if(name==='checkupdate'){
					//检查更新
                    this.updatemodal = true;
                }else if(name==='APIsetting'){
					this.$router.push({name:name,params:{id:'huobi'}});
				}else{
					this.$router.push({name:name});
				}
            },
            setMenuitem:function(){
                console.log(222)
                this.activemenuitem = "hedginginfo";
            },
			ok:function(){
				if(this.btntext=='关闭'){
					this.updatemodal = false;
				}else{
					//执行更新逻辑
				}
			}
        },
		destroyed() {
			ipcRenderer.removeAllListeners("telversion");
		}
    }
</script>
<style scoped>
:-webkit-full-screen { 
    
}
.slide-left-enter, .slide-right-leave-active {
	opacity: 0;
	-webkit-transform: translate(50px, 0);
	transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
	opacity: 0;
	-webkit-transform: translate(-50px, 0);
	transform: translate(-50px, 0);
}
:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }
</style>
